<template>
  <div class="data-service-module">
    <div class="main">

      <div class="more-text">
        <span>更多查询</span>
        <i>共<b class="red">8</b>项查询，其中<b class="red">1</b>项正在开发</i>
      </div>

      <Row :gutter="[24, 24]">
        <Col v-for="(item, index) in moduleList" :key="index" :span="6" :class="item.notShow?'notShow':''">
          <div class="data-service-module-box" :class="item.disable?'disable':''"  @click="jumpPath(item.key, item.path)">
            <div class="data-smb" :class="`imd${index%3}`" >
              <span class="data-service-module-img"
                    :style="`background-position: -${(index % 4) * 42}px -${ Math.floor(index/4) * 42}px`">
              </span>
              <div class="describe">
                <h3>{{ item.label }}</h3>
                <p>{{ item.describe }}</p>
              </div>
            </div>
          </div>
        </Col>
      </Row>
    </div>
    <ModalAwait v-model:visible="awaitVisible" />
  </div>

</template>

<script lang="ts" >
import { defineComponent, ref } from "vue";
import { Row, Col } from "ant-design-vue";
export default defineComponent({
  name: "ServiceModule",
  components: { Row, Col },
  setup() {
    const moduleList = ref<any>([
      { key: 1, path: "/buildProList", label: "查在建项目" ,describe:'点击查询查在建项目' },
      { key: 2, path: "/staffLock", label: "查项目人员锁定"  ,describe:'项目经理及项目负责人锁定',disable:false},
      { key: 3, path: "/permit", label: "查施工许可证照"  ,describe:'建设工程项目施工许可信息',disable:false}, //
      { key: 4, path: "/enter", label: "查企业进疆信息"  ,describe:'疆外企业首次进疆办件信息',disable:false},
      //{ key: 5, path: "/drawing", label: "审查合格书备案" ,describe:'疆外企业首次进疆办件信息'},
      { key: 5, path: "/finish", label: "查竣工验收备案信息" ,describe:'竣工验收备案信息查询'},
      { key: 6, path: "/limit", label: "查行为限制" ,describe:'行为限制查询' },
      { key: 7, path: "/punish", label: "查行政处罚"  ,describe:'点击查行政处罚'},
      { key: 8, path: "/", label: "查考试成绩"  ,describe:'点击查考试成绩',disable:true},
    ]);

    const jumpPath = (key: number, path: string) => {
      if(path!=='/'){
        window.open(path, '_blank');
      }
    };

    const awaitVisible = ref<boolean>(false);

    const openAwait = () => {
      awaitVisible.value = true;
    };

    return {
      moduleList,
      jumpPath,
      awaitVisible,
      openAwait,
    };
  },
});
</script>

<style lang="less" scoped>
.data-service-module {
  padding: 40px 0 100px;
  background: #f4f6fa;

  .more-text{
    margin-bottom: 20px;
    border-bottom: 1px solid #E0E5EB;

    span{
      display: inline-block;
      padding-bottom: 10px;
      font-size: 24px;
      font-weight: bold;
      line-height: 33px;
      color: #000;
      border-bottom: 3px solid #CD1922;;
    }

    i{
      float: right;
      font-size: 16px;
      transform: translateY(10px);
    }
  }

  .data-service-module-box {

    .data-smb{
      position: relative;
      display: flex;
      align-content: center;
      justify-content: start;
      align-items: center;
      height: 140px;
      padding: 30px 20px;
      cursor: pointer;
      background: #FFF;
      border: 1px solid #E1E6F0;

      span {
        display: block;

        &:first-child {
          width: 42px;
          height: 42px;
          margin-right: 15px;
          background-image: url(/src/assets/img/data_service.png);
        }



        &.data-service-module-img {
          background-position: 0 0;
        }
      }

      .describe{

        h3{
          font-size: 16px;
          color: #000;
        }

        p{
          font-size: 13px;
          color: #666;
        }

      }

      &:hover {
        color: @blue;
        //background: #f7fbff;
        // border: 1px solid #0078ff;
        // box-shadow: 0 3px 6px rgba(165, 174, 188, 0.16);
      }

      &::before{
        position: absolute;
        top: 0;
        left: 20px;
        z-index: 9;
        display: inline-block;
        width: 40px;
        height: 4px;
        border-radius: 0 0 2px 2px;
        content: '';

      }

      &.imd0::before{
        background: linear-gradient(90deg, #F0AE55 0%, #F4CE9B 100%);
      }

      &.imd1::before{
        background: linear-gradient(90deg, #4E9AFB 0%, #92C0FB 100%);
      }

      &.imd2::before{
        background: linear-gradient(90deg, #68DECD 0%, #A2EADF 100%);
      }
    }


    &.disable{
      .data-smb{
        cursor: default;
        background: #F5F5F5;
        border: 1px solid #E8EAEE;

        &::before{
          background: #9B9FA7;
        }

        .describe{

          h3,p{
            color: #999;
          }
        }
      }

    }
  }

  .notShow{
    display: none !important;
  }
}
</style>
